<template>
	<div>
		<div class="top" v-show="info" @click="xianshi">
			<img src="//img1.qunarzz.com/sight/p0/1712/95/95f38f28a6ff19cba3.img.jpg_600x330_682f736a.jpg" alt="">
			<div class="fanhui">
				<span class="iconfont icon-zuojiantou" @click="fanhui"></span>
			</div>
			<div class="top_text">
				<span>
					水奥雪世界
				</span>
				<div>
					<span>
						视频
					</span>
					<span class="iconfont icon-youjiantou"></span>
				</div>
			</div>
		</div>
		<!-- 景区图片显示 -->
		<div class="jqheaderTT" v-show="info2">
			<div class="jqheader">
				<span class="iconfont icon-zuojiantou" @click="xianshi2"></span>
				<div class="jqheader_mid">
					<span>景区图片</span>
				</div>
			</div>
		<!-- 照片显示 -->
			<ul class="tupian" >
				<li class="tupianChild" v-for="item in list" @click="bigPhoto" >
					<img :src="item.img" alt="">
				</li>
			</ul>
		</div>
		<!-- 大图片	 -->
		<div class="bigPhoto" v-show="info3" @click="bigPhoto2">
			<div class="bigPhoto2">
				<swiper :options="swiperOption">
					<swiper-slide class="swiperSlide" v-for="(item,index) in list" :key="item.index" >
						<img class="swiperImg" :src="item.img" alt="" @click="shuzi">
					</swiper-slide>
					<!-- <div class="swiper-pagination"  slot="pagination"></div> -->
				</swiper>
			</div>
			<div class="footer" v-for="(item,index) in list" :key="item.index">
				<span>{{item.id}}</span>/
				<span>{{list.length}}</span>
			</div>
		</div>
	</div>
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		data() {
			return {
				info:true,
				info2:false,
				info3:false,
				list:[
					{
						id:"1",
						img:"http://img1.qunarzz.com/sight/p0/1712/95/95f38f28a6ff19cba3.img.jpg_350x240_2fa80d8d.jpg"
					},
					{
						id:"2",
						img:"http://img1.qunarzz.com/sight/p0/1812/36/3681190a5aeb0d79a3.img.jpg_350x240_591bd36b.jpg"
					},
					{
						id:"3",
						img:"http://img1.qunarzz.com/sight/p0/1712/a8/a82aba7c2a07a4c0a3.img.jpg_350x240_fc9c7378.jpg"
					},
					{
						id:"4",
						img:"http://img1.qunarzz.com/sight/p0/1712/13/135fb280ce2bc40ba3.img.jpg_350x240_c971b2a4.jpg"
					},
					{
						id:"5",
						img:"http://img1.qunarzz.com/sight/p0/1712/5a/5a7207612a4f33c6a3.img.jpg_350x240_40eb60e7.jpg"
					}
				],
				swiperOption:{
					pagination:{
						el:'.swiper-pagination'
					},
					// 设置显示容器同时显示的数量
					slidesPerView:1,
				}
			};
		},
		methods:{
			fanhui(){
				this.$router.push('/')
			},
			xianshi(){
				this.info=false;
				this.info2=true;
			},
			xianshi2(){
				this.info=true;
				this.info2=false;
			},
			bigPhoto(){
				this.info2=false;
				this.info3=true;
			},
			bigPhoto2(){
				this.info2=true;
				this.info3=false;
			},
			shuzi(){
				console.log(this.list.length)
				console.log(item.id)
			}
		},
		 components: {
			swiper,
			swiperSlide
		}
	}
</script>

<style scoped>
	.top{
		position: relative;
	}
	.top img{
		width: 100%;
		height:2rem;
	}
	.fanhui{
		width: .36rem;
		height: .36rem;
		background: black;
		border-radius: 50%;
		opacity: .5;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: .36rem;
	}
	.fanhui span{
		color: white;
		font-size: .22rem;
	}
	.top_text{
		position: absolute;
		bottom: .2rem;
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: white;
		font-size: .20rem;
		padding:0 .1rem;
		box-sizing: border-box;
	}
	/* 景区图片 */
	.jqheader{
		width:100%;
		height: .44rem;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		}
	.jqheader>span{
		width: 10%;
		font-size: .24rem;
	}
	.jqheader_mid{
		width: 80%;
		text-align: center;
	}
	.tupian{
		width: 100%;
		box-sizing: border-box;
		padding: .05rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
/* 	.tupianChild{
		
	} */
	.tupianChild img{
		width:1.75rem;
		height: 1.2rem;
		text-align: center;
		padding-left: .05rem;
	}
	/* 大图片 */
	.bigPhoto{
		width: 100%;
		height: 6.67rem;
		background: black;
	}
	.bigPhoto2{
		position: fixed;
		background: black;
		top: 30%;
		width: 100%;
		height: .2rem;
	}
	.swiperSlide{
		/* top: 5rem;
		left: 1rem; */
	}
	.swiperImg{
		/* position: absolute; */
		width: 100%;
		height: 2rem;
	}
	.swiper-slide{
		width: 100% !important;
	}
	.swiper>>>.swiper-pagination-bullet-active{
		background: white;
	}
	.footer{
		width: .5rem;
		height: .2rem;
		color: white;
		position: absolute;
		bottom: .4rem;
		left: 45%;
	}
	</style>
